<template>
  <div class="home">
    <div class="tut">
      <pic-zoom :url="img" :scale="3"></pic-zoom>
    </div>

    <ul class="ul">
      <li v-for="item in list" @click="big(item.img)" :key="item.id">
        <img :src="item.img" alt="" />
      </li>
    </ul>
  </div>
</template>
<script>
import PicZoom from "vue-piczoom";
export default {
  // 调用子组件
  components: {
    PicZoom,
  },
  data() {
    return {
      list: [],
      img: "/img/1.jpg",
    };
  },
  mounted() {
    this.$axios.get("/img.json").then((res) => {
      this.list = res.data;
    });
    this.big(this.img);
  },
  // 事件方法
  methods: {
    big(img) {
      this.img = img;
    },
  },
};
</script>
<style lang="scss" scoped>
.ul {
  width: 50%;
  display: flex;
  margin-left: 20px;
  justify-content: space-between;
  li {
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// .ttt {
//   width: 100%;
//   display: flex;
//   justify-content: space-around;
// }
.tut {
  margin: 10px 20px 20px 40px;
  width: 40%;
  height: 300px;
  border: 1px solid darkcyan;
  img {
    width: 100%;
    height: 100%;
  }
}
// .datu {
//   margin: 10px 20px 20px 40px;
//   width: 40%;
//   height: 400px;
//   border: 1px solid darkcyan;
//   img {
//     width: 100%;
//     height: 100%;
//   }
// }
</style>
